
<template>
    <div class="luck-box"  style="position: relative">
        <div class="alipay-return">
            <i @click="luckuserreturn()" class=" plipayticon iconfont icon-jiantou"></i>
            <span>抽奖</span>
        </div>
        <div class="luck-title" >
            <div class="luck-title-title" >
                <img src="../../assets/img/titlle.png">
                <span>{{luckdraw_Total_num}}个用户已参与</span>
                <p v-if="luckUserId == userId">恭喜您，您中奖了！</p>
                <p v-else>很遗憾，您未中奖，请再接再厉</p>
                <div class="luch-yuan">
                    <span>{{balance}}</span>
                    <div style="float: right">
                        <div class="luch-yuan-right">元</div>
                        <div class="luch-yuan-text">现金<br>红包</div>
                    </div>
                </div>
                <div v-if="luckUserId != userId" class="looklook">
                       中奖用户: {{phone}}
                </div>
                <div class="grade-ruler" @click="drawruler()">
                    抽将规则
                </div>
                <div  class="grade-ruler-content">
                    现金红包奖品，将在开奖后的第二天8点整点发放到中奖者的钱包账户中。
                </div>
            </div>

        </div>
        <!-- <div class="luck-title" >
            <div class="luck-title-title" >
                <img src="../../assets/img/titlle.png">
                <span>3123个用户已参与</span>
                <p>下次抽奖开放时间：2020/2/22 20:00</p>
                <div class="luch-yuan">
                    <span>188</span>
                    <div style="float: right">
                        <div class="luch-yuan-right">元</div>
                        <div class="luch-yuan-text">现金<br>红包</div>
                    </div>
                </div>
                <div class="looklook">
                    中奖用户: 1888*****88
                </div>
                <div class="grade-ruler" @click="drawruler()">
                    抽将规则
                </div>
                <div  class="grade-ruler-content">
                    中奖后，如果是现金红包奖品，将在开奖后第二天的8点整发放到中奖者的钱包，如果是实物奖品，3个工作日内由客服联系中奖者确认收货地址。
                </div>
            </div>

        </div> -->


    </div>
</template>

<script>

    export default {
        name: "luckuser",
        data(){
            return{
                gameId:'',
                luckdraw_Total_num:0,
                balance:0,
                phone:'',
                userId:'',
                luckUserId:''
            }
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.gameId = this.$route.params.id;
            this.initData();
        },
        methods:{
            initData(){                
                this.$http.post(this.utils.config+"/netmall/app/gamecenter/api/getWinPrizeInfo?id="+this.gameId).then((data) => {
                    if(data.data.success){
                        this.luckdraw_Total_num = data.data.result.luckdraw_Total_num;
                        this.balance = data.data.result.tbUserLuckdrawList.balance;
                        this.luckUserId = data.data.result.tbUserLuckdrawList.luckUserId;
                        this.phone = this.starPhone(data.data.result.tbUserLuckdrawList.phone);
                    }
                })
            },
            //手机号后四位变星号
            starPhone(phoneNum){
                let str =  String(phoneNum),
                strLen = str.slice(-7,-3);
                return str.replace(strLen,"****");
            },
            luckuserreturn(){
                this.$router.go(-1)
            },
            graddrawuser(){

            },
            drawruler(){
                this.$router.push('/luckruler');
            }


        }
    }
</script>

<style scoped>
    @import "../../assets/font/iconfont.css";
    .looklook{
        height:45px;
        background:rgba(255,232,80,1);
        border-radius:23px;
        margin: auto 25px;
        font-size:15px;
        font-family:AppleSystemUIFont;
        color:rgba(255,46,103,1);
        line-height:45px;
    }
    .luck-box{
        width: 100%;
        min-height: 100%;
        background:rgba(255,46,103,1);
        padding-bottom: 63px;
    }
    .alipay-return {
        width: 100%;
        padding: 12px 14px 0 14px;
        height: 56px;
        text-align: center;
        position: relative;
    }

    .alipay-return span {
        margin-top: 12px;
        height:22px;
        font-size:16px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(255,255,255,1);
        line-height:22px;
    }

    .plipayticon {
        font-size: 18px;
        color:rgba(255,255,255,1);
        font-weight: 900;
        position: absolute;
        top: 12px;
        left: 14px;
    }
    .luck-title{
        margin: 20px 38px 0 38px;
        height:720px;
        background:rgba(253,255,218,1);
        border-radius:0px 0px 5px 5px;

    }
    .luck-title-title{
        width: 100%;
        height:50px;
        background:rgba(255,232,80,1);
        font-size:16px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:rgba(144,90,0,1);
        text-align: center;
    }
    .luck-title-title img{
        height: 20px;
        width: 100%;
        right: -1px;
    }
    .luck-title-title p{
        height: 45px;
        margin-top: 24px;
        font-size:15px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(255,46,103,1);
        line-height:21px;
    }
    .luch-yuan{
        height: 130px;
        width: 200px;
        font-size:80px;
        font-family:DIN-Black,DIN;
        font-weight:900;
        color:rgba(255,46,103,1);
        line-height:98px;
        margin: 0  auto 0 auto;

    }

    .luch-yuan-right {
        margin-top: 10px;
        width: 31px;
        height: 27px;
        background: rgba(255, 46, 103, 1);
        border-radius: 88px 100px 100px 1px;
        font-size: 20px;
        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        line-height: 29px;
    }
    .luch-yuan-text{
        margin-top: 10px;
        font-size:14px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:rgba(255,46,103,1);
        line-height:17px;

    }
    .luch-stick{
        position: absolute;
        top: 280px;
        right: 0px;
        left: 0;
        height: 130px;
        width: 100%;
        background: url("../../assets/img/bg1.png");
        background-size: 100% 100%;
    }

    .grade-ruler{
        height: 60px;
        width: 100%;
        font-size:12px;
        font-family:AppleSystemUIFont;
        color:rgba(255,46,103,1);
        line-height:70px;
        position: relative;
    }
    .grade-ruler:before{
        content: "";
        position:absolute;
        top:34px;
        left: 60px;
        width:37px;
        height:1px;
        background:rgba(255,46,103,1) ;
    }
    .grade-ruler:after{
        content: "";
        position:absolute;
        top:34px;
        right: 60px;
        width:37px;
        height:1px;
        background:rgba(255,46,103,1) ;
    }
    .grade-ruler-content{
        text-align: left;
        padding: 0 15px;
        font-size:13px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(170,118,31,1);
        line-height:20px;
    }

</style>


